import {
    h,
} from "snabbdom";
import patch from '../mysnabbdom/patch'

const container = document.getElementById("container");
const btn = document.getElementById("btn")

// h函数：生成虚拟节点

// 普通文本节点上树
// const vnode = h('p',{},'hello ya')
// 嵌套有字节点上树
const vnode = h('ul',{},[
    h('li',{key:'A'},'A'),
    h('li',{key:'B'},'B'),
    h('li',{key:'C'},'C')
])
const vnode1 = h('ul',{},'text')

const vnode2 = h('ul',{},[
    h('li',{key:'A'},'A'),
    h('li',{key:'B'},'B'),
    h('li',{key:'M'},'M'),
    h('li',{key:'N'},'N'),
    h('li',{key:'C'},'C'),
    h('li',{key:'P'},'P'),
    h('li',{key:'Q'},'Q'),
])


// 上树

// 1.新节点没有子节点
// patch(container,vnode)

// 2.新节点有子节点，老节点没有子节点
// patch(container,vnode1)

// 3.新节点有子节点，老节点也有子节点
patch(container,vnode)

// 点击按钮改变内容
btn.onclick = function (){
    // 1.新节点没有子节点
    // patch(vnode,vnode1)

    // 2.新节点有子节点，老节点没有子节点
    // patch(vnode1,vnode)

    // 3.新节点有子节点，老节点也有子节点
    patch(vnode,vnode2)
}
